﻿@using xConnected.Common.ExpertProfile
@using xConnected.Common.Project
<div data-bind="visible: $root.logOn.createProfilesVisible">
    <div class="row-fluid">
        <a class="btn btn-large btn-block span4" data-bind="click: function(){ $root.profile.selectNew(); }"><h6>CREATE EXPERT PROFILE</h6></a>
        <a class="btn btn-large btn-block span4" data-bind="click: function(){ $root.company.selectNew(); }"><h6>CREATE COMPANY PROFILE</h6></a>
        <a class="btn btn-large btn-block span4" data-bind="click: function(){ $root.position.selectNew(); }"><h6>CREATE POSITION/PROJECT</h6></a>
    </div>
</div>
<div data-bind="visible: !$root.logOn.createProfilesVisible()">
    <div class="row-fluid" style="margin-bottom: 20px;">
        <div class="span3">
            <span style="font-size: x-large;">My Expert Profiles</span>
        </div>
        <div class="span2 pull-right">
            <a class="btn btn-info" data-bind="click: function() { $root.profile.selectNew(); }, tooltip: {title: '@Resources.Createnewprofilesmall', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">Create new <i class="icon-plus icon-white"></i></a>
        </div>
    </div>
    <div data-bind="with: profile">
        <ul class="unstyled" data-bind="foreach: profiles">
            <li>
                <div class="thumbnail breadcrumb row">
                    <div class="span1" align="left" style="width: 50px;">
                        <img class="img-rounded" data-bind="attr: {src: $data.Photo50X50()}" alt="Profile photo">
                    </div>
                    <div class="span2" style="margin-top: 10px; width: 150px;">
                        <span style="font-size: large" data-bind="text: Title"></span>
                    </div>
                    <div class="span3" style="margin-top: 10px; width: 180px;">
                        <span data-bind="text: DescriptionShort"></span>
                    </div>
                    <div class="span2" style="margin-top: 10px; width: 150px;" data-bind="with:Country">
                        <small style="font-weight: bold;">Country: </small><small data-bind="text: Description"></small>
                    </div>
                    <div class="span2" style="margin-top: 10px; width: 150px;" data-bind="with:Industry">
                        <small style="font-weight: bold;">Industry: </small><small data-bind="text: Description"></small>
                    </div>
                    <div class="span2" style="margin-top: 10px; width: 150px;">
                        <small style="font-weight: bold;">Categories: </small>
                        @* <span data-bind="foreach: CategorySkills">
                        <small data-bind="text: CategoryName"></small>,
                    </span>*@
                    </div>
                    <div class="span2"  style="margin-top: 10px; width: 140px;">
                        <a class="btn btn-mini" href="#" data-bind="click: function() { $root.profile.selectDetails($data); }, tooltip: {title: 'View details', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                            <i class="icon-zoom-in"></i>
                        </a>
                        <a class="btn btn-mini" href="#" data-bind="click: function() { $root.profile.selectEdit($data); }, tooltip: {title: 'Edit profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                            <i class="icon-pencil"></i>
                        </a>
                        <a class="btn btn-mini" data-toggle="modal" href="#DeleteDialog" data-bind="click: function() { $root.profile.select($data); }, tooltip: {title: 'Delete profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                            <i class="icon-trash"></i>
                        </a>
                        <a class="btn btn-mini" href="#" data-bind="click: function() { $root.profile.setAsDefault($data); }, tooltip: {title: 'Set this profile as default profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                            <i data-bind="css:{'icon-user': $data.IsDefault() == true, 'icon-user icon-white': $data.IsDefault() == false}"></i>
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <a href="#" data-bind="visible: $root.profile.profiles().length <= 3, click: function(){ $root.profile.showAllMyExperts();}">
        <span>Show all expert profiles </span>
        <i class="icon-chevron-down"></i>
    </a>
    <a href="#" data-bind="visible: $root.profile.profiles().length > 3, click: function(){ $root.profile.showLessMyExperts();}">
        <span>Show less expert profiles </span>
        <i class="icon-chevron-up"></i>
    </a>
    <hr/>
    <div class="row-fluid" style="margin-bottom: 20px;">
        <div class="span3">
            <span style="font-size: x-large;">My Company Profiles</span>
        </div>
        <div class="span2 pull-right">
            <a class="btn btn-info" data-bind="click: function() { $root.company.selectNew(); }, tooltip: {title: '@Resources.Createnewprofilesmall', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">Create new <i class="icon-plus icon-white"></i></a>
        </div>
    </div>
    <div data-bind="with: company">
        <ul class="unstyled" data-bind="foreach: companies">
            <li>
                <div class="thumbnail breadcrumb row">
                    <div class="span1" align="left" style="width: 50px;">
                        <img class="img-rounded" data-bind="attr: {src: $data.Photo50X50()}" alt="Logo">
                    </div>
                    <div class="span2" style="margin-top: 10px; width: 150px;">
                        <span style="font-size: large" data-bind="text: Title"></span>
                    </div>
                    <div class="span3" style="margin-top: 10px; width: 180px;">
                        <span data-bind="text: DescriptionShort"></span>
                    </div>
                    <div class="span2" style="margin-top: 10px; width: 150px;" data-bind="with:Country">
                        <small style="font-weight: bold;">Country: </small><small data-bind="text: Description"></small>
                    </div>
                    <div class="span2" style="margin-top: 10px; width: 150px;" data-bind="with:Industry">
                        <small style="font-weight: bold;">Industry: </small><small data-bind="text: Description"></small>
                    </div>
                    <div class="span2" style="margin-top: 10px; width: 150px;">
                        <small style="font-weight: bold;">Categories: </small>
                        <span data-bind="foreach: Categories">
                            <small data-bind="text: Description"></small>,
                        </span>
                    </div>
                    <div class="span2"  style="margin-top: 10px; width: 140px;">
                        <a class="btn btn-mini" href="#" data-bind="click: function() { $root.company.selectDetails($data); }, tooltip: {title: 'View details', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                            <i class="icon-zoom-in"></i>
                        </a>
                        <a class="btn btn-mini" href="#" data-bind="click: function() { $root.company.selectEdit($data); }, tooltip: {title: 'Edit profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                            <i class="icon-pencil"></i>
                        </a>
                        <a class="btn btn-mini" data-toggle="modal" href="#DeleteCompanyDialog" data-bind="click: function() { $root.company.select($data); }, tooltip: {title: 'Delete profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                            <i class="icon-trash"></i>
                        </a>
                        <a class="btn btn-mini" href="#" data-bind="click: function() { $root.company.setAsDefault($data); }, tooltip: {title: 'Set this profile as default profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                            <i data-bind="css:{'icon-user': $data.IsDefault() == true, 'icon-user icon-white': $data.IsDefault() == false}"></i>
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <a href="#" data-bind="visible: $root.company.companies().length <= 3, click: function(){ $root.company.showAllMyCompanies();}">
        <span>Show all company profiles </span>
        <i class="icon-chevron-down"></i>
    </a>
    <a href="#" data-bind="visible: $root.company.companies().length > 3, click: function(){ $root.company.showLessMyCompanies();}">
        <span>Show less company profiles </span>
        <i class="icon-chevron-up"></i>
    </a>
    <hr/>
    <div class="row-fluid" style="margin-bottom: 20px;">
        <div class="span3">
            <span style="font-size: x-large;">My Positions/Projects</span>
        </div>
        <div class="span2 pull-right">
            <a class="btn btn-info" data-bind="click: function() { $root.position.selectNew(); }, tooltip: {title: '@ProjectRes.CreateProject', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">Create new <i class="icon-plus icon-white"></i></a>
        </div>
    </div>
    <div data-bind="with: position">
        <ul class="unstyled" data-bind="foreach: positions">
            <li>
                <div class="thumbnail breadcrumb row">
                    <div class="span1" align="left" style="width: 50px;">
                        <img class="img-rounded" data-bind="attr: {src: $data.Photo50X50()}" alt="Logo">
                    </div>
                    <div class="span2" style="margin-top: 10px; width: 150px;">
                        <span style="font-size: large" data-bind="text: Title"></span>
                    </div>
                    <div class="span3" style="margin-top: 10px; width: 180px;">
                        <span data-bind="text: Description"></span>
                    </div>
                    <div class="span2" style="margin-top: 10px; width: 150px;" data-bind="with:Country">
                        <small style="font-weight: bold;">Country: </small><small data-bind="text: Description"></small>
                    </div>
                    <div class="span2" style="margin-top: 10px; width: 150px;" data-bind="with:Industry">
                        <small style="font-weight: bold;">Industry: </small><small data-bind="text: Description"></small>
                    </div>
                    <div class="span2" style="margin-top: 10px; width: 150px;">
                        <small style="font-weight: bold;">Categories: </small>
                        <span data-bind="foreach: Categories">
                            <small data-bind="text: Description"></small>,
                        </span>
                    </div>
                    <div class="span2"  style="margin-top: 10px; width: 140px;">
                        <a class="btn btn-mini" href="#" data-bind="click: function() { $root.position.selectDetails($data); }, tooltip: {title: 'View details', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                            <i class="icon-zoom-in"></i>
                        </a>
                        <a class="btn btn-mini" href="#" data-bind="click: function() { $root.position.selectEdit($data); }, tooltip: {title: 'Edit profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                            <i class="icon-pencil"></i>
                        </a>
                        <a class="btn btn-mini" href="#" data-bind="click: function() { $root.position.select($data); }, tooltip: {title: 'Delete profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                            <i class="icon-trash"></i>
                        </a>
                        <a class="btn btn-mini" href="#" data-bind="click: function() { $root.position.setAsDefault($data); }, tooltip: {title: 'Set this profile as default profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                            <i data-bind="css:{'icon-user': $data.IsDefault() == true, 'icon-user icon-white': $data.IsDefault() == false}"></i>
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <a href="#" data-bind="visible: $root.position.positions().length <= 3, click: function(){ $root.position.showAllMyPositions();}">
        <span>Show all positions/projects </span>
        <i class="icon-chevron-down"></i>
    </a>
    <a href="#" data-bind="visible: $root.position.positions().length > 3, click: function(){ $root.position.showLessMyPositions();}">
        <span>Show less positions/projects </span>
        <i class="icon-chevron-up"></i>
    </a>
</div>